<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<style>
    .static {
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 150px;
        font-size: 24px;
        color: darkmagenta;
        font-weight: bold;
        margin: 10px;
    }

    .a {
        border: 3px solid darkolivegreen;
    }

    .b {
        background: deeppink;
    }

    .c {
        border-radius: 50%;
    }

    .main {
        margin: 20px;
    }

    .nav {
        display: flex;
    }

    .nav-item {
        width: 100px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        color: yellowgreen;
        background: palevioletred;
        border-radius: 10px;
        font-size: 14px;
        margin: 10px;
        text-align: center;
    }

    .nav-active {
        background: crimson;
        color: #fff;
    }

    .content-item {
        width: 350px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        background: crimson;
        color: cyan;
        border-radius: 20px;
        margin: 10px;

    }
</style>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <div>
            <h3 v-for="(l,i) in items" v-bind:key='i'>
                {{l.message}}---{{i}}
            </h3>
        </div>
        <div>
            <h4 v-for="(value,key,index) in object" :key='index'>
                {{key}}:{{value}}:{{index}}
                <!-- 比如上面这一行 key显示的就是标头名，value就是角标对应的值，index就是索引 -->
            </h4>
        </div>
        <div>
            <h3>省市二级联动</h3>
            <ul>
                <li v-for="(value,index) in provinces" :key='index'>
                    省份：{{value.name}}---{{index}}
                    <ol>
                        <li v-for="(city,i) in value.cities" :key="i">
                            {{city.name}}
                        </li>
                    </ol>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    var provinces = [{
        name: "浙江",
        cities: [{
            name: '金华',
        }, {
            name: '杭州'
        }, {
            name: '温州'
        },]
    }, {
        name: "湖北",
        cities: [{
            name: '武汉'
        }, {
            name: '襄樊'
        }, {
            name: '黄冈'
        },]
    }, {
        name: "江苏",
        cities: [{
            name: '南京'
        }, {
            name: '徐州'
        }, {
            name: '连云港'
        },]
    }];
    new Vue({
        data: {
            title: 'v-for 遍历循环数组和对象',
            items: [
                { message: 'Foo' },
                { message: 'Bar' },
                { message: '武则天' },
                { message: '小泽二次郎' }
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            provinces,
        }
    }).$mount('#app');
</script>

</html>